<template>
	<div id="app">
		<u-navbar :title="navbarTitle" :border="false"></u-navbar>

		<div class="container">
			<div v-if="doctors.length > 0" class="doctor-list">
				<div v-for="doctor in doctors" :key="doctor.id" class="doctor-card">
					<div class="doctor-header">
						<div class="doctor-avatar">
							{{ getFirstChar(doctor.doctorName) }}
						</div>
						<div class="doctor-info">
							<div class="doctor-name-row">
								<div class="doctor-name">{{doctor.doctorName }}</div>
								<div class="divider"></div>
								<div class="doctor-title">
									{{ doctor.doctorLevelId == 0 ? '主治医师' : doctor.doctorLevelId == 1 ? '副主任医师' : '主任医师' }}
								</div>
							</div>
							<div class="doctor-department">
								{{ doctor.departmentName }}<span class="arrow-down">▼</span>
							</div>
						</div>
					</div>
					<div class="doctor-intro">
						<strong>简介:</strong> {{ doctor.doctorDescription }}
					</div>
					<button class="unfollow-btn" @click="handleUnfollow(doctor)">取消关注</button>
				</div>
			</div>


			<div v-else class="empty-state">
				<div class="empty-icon">
					<u-icon name="heart-off" size="40"></u-icon>
				</div>
				<p>暂无收藏的医生</p>
			</div>
		</div>

		<view>
			<u-toast ref="uToast" />
		</view>

	</div>
</template>

<script>
	import {
		query,
		deleteConcern
	} from '@/api/concern.js'
	import store from '../../store';
	export default {
		data() {
			return {
				navbarTitle: '我的收藏',
				doctors: [],
			}
		},
		methods: {
			handleUnfollow(doctor) {
				deleteConcern({
					concernId: doctor.concernId
				}).then((res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '修改成功',
							type: 'success',
						})
						this.queryConcert();
					}
				}))
			},
			queryConcert() {
				query({
					userId: this.$store.state.userId
				}).then((res => {
					console.log(res)
					this.doctors = res.rows
				}))
			},
			getFirstChar(doctorName) {
				return doctorName ? doctorName.charAt(0) : '';
			}
		},
		mounted() {
			this.queryConcert();
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		background-color: #f5f7f9;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		color: #333;
		padding-bottom: 20px;
	}

	.container {
		padding: 15px;
		max-width: 800px;
		margin: 0 auto;
	}

	.doctor-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.doctor-card {
		background-color: #fff;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		position: relative;
	}

	.doctor-header {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.doctor-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		/* 圆形头像 */
		margin-right: 15px;
		object-fit: cover;
		border: 1px solid #f0f0f0;
		background-color: #4A90E2;
		/* 默认头像背景色 */
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
	}

	.doctor-info {
		flex: 1;
	}

	.doctor-name-row {
		display: flex;
		align-items: center;
		margin-bottom: 6px;
	}

	.doctor-name {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-right: 10px;
	}

	.divider {
		width: 1px;
		height: 16px;
		background-color: #ff0000;
		margin-right: 10px;
	}

	.doctor-title {
		font-size: 14px;
		color: #333;
	}

	.doctor-department {
		font-size: 14px;
		color: #333;
		display: flex;
		align-items: center;
	}

	.arrow-down {
		margin-left: 5px;
		color: #999;
	}

	.doctor-intro {
		font-size: 14px;
		color: #888;
		line-height: 1.6;
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #eee;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.unfollow-btn {
		position: absolute;
		top: 20px;
		right: 20px;
		border: 1px solid #ff0000;
		color: #ff0000;
		border-radius: 4px;
		padding: 4px 10px;
		font-size: 13px;
		background: transparent;
		cursor: pointer;
	}

	.empty-state {
		text-align: center;
		padding: 40px 20px;
		color: #999;
	}

	.empty-icon {
		font-size: 60px;
		margin-bottom: 15px;
		color: #ccc;
	}

	@media (max-width: 480px) {
		.doctor-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.doctor-avatar {
			margin-bottom: 12px;
		}

		.unfollow-btn {
			position: static;
			margin-top: 15px;
			text-align: right;
		}
	}
</style>